window.onload = function () {
    /*
     * 我要执行滚动条滚动*/
    search();
    banner();
}
//搜索框滚动
function search() {
    /*
     *1:我要获取到轮播图
     * 2：我要获取header
     *
     * */
    var header_box = document.querySelector(".jd_header_box");
    var banner = document.querySelector(".jd_banner");
    var h = banner.offsetHeight;
    //console.log(h);
    //监控滚动条
    window.onscroll = function () {
        var opacity = 0;
        //获取滚动条的距离
        var top = document.body.scrollTop;

        //进行判断
        if (top < h) {
            opacity = top / h * 0.85;
        } else {
            opacity = 0.85;
        }
        //console.log(top);
        //我在滚动的时候去更改透明度
        header_box.style.background = "rgba(201,21,35," + opacity + ")";
    }
}
/*轮播图*/
function banner() {
    /*
     * 1:我要获取页面上的dom元素
     * 2:动态的滚动  定时器  translateX（） transition
     * 3图片滚动了 盒子对应的点随着变化
     * 4:触摸图片，图片根据手指触摸的变化而变化
     * 5:我的手指滑动，当滑动超过一定的距离，我就跳到下一张  没有超过一定的距离就吸附回去
     * */
    var banner = document.querySelector(".jd_banner");
    var imageBox = banner.querySelector("ul:first-child");
    var pointsBox = banner.querySelector("ul:last-child");
    //获取到屏幕的宽度
    var w = banner.offsetWidth;
    //要获取到banner中的白色圆点，用querySelectorAll
    var pointlis = pointsBox.querySelectorAll("li");
    //用来记录图片盒子的索引
    var index = 1;
    //过度  提炼
    var addTransition = function () {
        imageBox.style.transition = "all 0.2s";
        imageBox.style.webkitTransition = "all 0.2s";
    };
    //删除过度，以为到最后一张跳转第一张会有卡顿（过度）所以要删除
    var removeTransition = function () {
        imageBox.style.transition = "none";
        imageBox.style.webkitTransition = "none";
    }
    //位置移动  提炼
    var addTranslate = function (w) {
        imageBox.style.transform = "translateX(" + w + "px)";
        imageBox.style.webkitTransform = "translateX(" + w + "px)";
    }

    //我需要把动态的滚动做出来，需要添加定时器
    var timer = setInterval(function () {
        index++;
        //添加过度
        addTransition();
        //我在这必须动态的去改谁
        addTranslate(-index * w);
    }, 1000);

    ///*我可以webkitTransitionEnd*/
    //imageBox.addEventListener("webkitTransitionEnd", function () {
    //    if(index<=0){
    //        index=8;
    //        removeTransition();
    //        addTranslate(-index * w);
    //    }
    //    else if(index>=9){
    //        index=1;
    //        removeTransition();
    //        addTranslate(-index * w);
    //    }
    //});
    //imageBox.addEventListener("webkitTransitionEnd", function () {
    //
    //});
    itcast.transition(imageBox, function () {
        if (index <= 0) {
            index = 8;
            removeTransition();
            addTranslate(-index * w);
        }
        else if (index >= 9) {
            index = 1;
            removeTransition();
            addTranslate(-index * w);
        }
    });
}


/*
 * 倒计时
 * */